<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li {
				list-style: none;
				width: 100px;
				height: 100px;
				background-color: pink;
				margin: 5px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li class = "box1"></li>
			<li class = "box2"></li>
			<li id = "box3"></li>
			<li class = "box4"></li>
			<li class = "box5"></li>
		</ul>
		<script type="text/javascript">
			//parentNode父盒子
			var box3 = document.getElementById("box3");
			box3.parentNode.style.backgroundColor = "blue";
			//兄弟节点 (previousSibling&nextsibling)
			var pre = box3.previousElementSibling || box3.previousSibling;
			var net = box3.nextElementSibling || box3.nextSibling;
			pre.style.backgroundColor = "red";
			net.style.backgroundColor = "yellow";
			//单个子元素(firstChild&lastChild)
			var first = box3.parentNode.firstElementChild || box3.parentNode.firstChild;
			var last = box3.parentNode.lastElementChild || box3.parentNode.lastChild;
			first.style.backgroundColor = "orange";
			last.style.backgroundColor = "green";
			//所有子元素
			var arr = box3.parentNode.children;
			for(var i = 0;i<arr.length;i++){
				arr[i].style.backgroundColor = "black"
			}
			console.log(box3.parentNode.childNodes);
			var arr2 = box3.parentNode.childNodes;
			for(var i = 0;i<arr2.length;i++){
				if(arr2[i].nodeType === 1){
					console.log(arr2[i]);
				}
			}
			//随意获取指定兄弟节点
			var index = 0;
			var node = box3.parentNode.children[index];
			//获取所有的兄弟节点
			function siblings(elm) {
				var a = [];
				var p = elm.parentNode.children;
				for(var i = 0;i<p.length;i++){
					if(p[i] !== elm) {
						a.push(p[i]);
					}
				}
				
				return a;
				
			}
			console.log(siblings(box3));
		</script>
	</body>
</html>
